<template>
  <el-card>
    <template v-slot:header>
      <div class="clearfix">
        <span>每日健康上报</span>
      </div>
    </template>

    <el-form
        ref="baseInfoRef"
        label-position="right"
        label-width="160px"
        style="margin-right: 20px"
        status-icon
        :model="baseInfoForm"
        :rules="baseInfoRules"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户姓名：" prop="name">
            <el-input
                v-model="baseInfoForm.name"
                placeholder="请输入用户姓名"
                clearable
                show-word-limit
                maxlength="50"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="用户性别：" prop="sex">
            <el-radio-group v-model="baseInfoForm.sex">
              <el-radio value="1">男</el-radio>
              <el-radio value="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户学号：" prop="studentNumber">
            <el-input
                v-model="baseInfoForm.studentNumber"
                placeholder="请输入用户学号"
                clearable
                show-word-limit
                maxlength="20"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="用户年龄：" prop="age">
            <el-input-number v-model="baseInfoForm.age"
                             style="width: 62%"
                             controls-position="right"
                             placeholder="请输入用户年龄"
                             show-word-limit
                             :max="999"
            >
              <template #decrease-icon>
                <el-icon>
                  <Minus/>
                </el-icon>
              </template>
              <template #increase-icon>
                <el-icon>
                  <Plus/>
                </el-icon>
              </template>
            </el-input-number>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户学院：" prop="college">
            <el-input
                v-model="baseInfoForm.college"
                placeholder="请输入用户学院"
                clearable
                show-word-limit
                maxlength="100"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="用户专业：" prop="major">
            <el-input
                v-model="baseInfoForm.major"
                placeholder="请输入用户专业"
                clearable
                show-word-limit
                maxlength="100"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户班级：" prop="grade">
            <el-input
                v-model="baseInfoForm.grade"
                placeholder="请输入用户班级"
                clearable
                show-word-limit
                maxlength="100"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="用户电话：" prop="phone">
            <el-input
                v-model="baseInfoForm.phone"
                placeholder="请输入用户电话"
                clearable
                show-word-limit
                maxlength="20"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="紧急联系人：" prop="emergencyContacts">
            <el-input
                v-model="baseInfoForm.emergencyContacts"
                placeholder="请输入紧急联系人"
                clearable
                show-word-limit
                maxlength="50"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="紧急联系人电话：" prop="contactPhone">
            <el-input
                v-model="baseInfoForm.contactPhone"
                placeholder="请输入紧急联系人电话"
                clearable
                show-word-limit
                maxlength="20"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="填报日期：" prop="fillDate">
            <el-date-picker
                v-model="baseInfoForm.fillDate"
                style="width: 100%;"
                type="datetime"
                placeholder="请选择填报日期"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="筛查结果：" prop="enterTime">
            <el-select v-model="baseInfoForm.contactScreening"
                       placeholder="请你选择搜索筛查结果">
              <el-option v-for="item in contactScreeningOption"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"
                         clearable
                         filterable
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <div style="display: flex; justify-content: center; align-items: center;">
            <el-button type="primary" plain @click="saveButton(baseInfoRef)">保存</el-button>
            <el-button type="warning" plain @click="resetButton">重置</el-button>
          </div>
        </el-col>
      </el-row>

      <el-divider/>
    </el-form>

  </el-card>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {Minus, Plus} from "@element-plus/icons-vue";
import {FormInstance, FormRules} from "element-plus";
import {ApiResponse} from "@/utils/request.ts";
import {saveInfoReq} from "@/api/record/health.ts";

/**
 * 表单数据定义
 */
const baseInfoRef = ref<FormInstance>();

const contactScreeningOption = [
  {
    value: '1',
    label: '阳性'
  },
  {
    value: '2',
    label: '阴性'
  },
  {
    value: '3',
    label: '无症状'
  }
]

/**
 * 表单校验定义
 */
const baseInfoForm = ref({
  name: '',
  sex: '1',
  studentNumber: '',
  age: 0,
  college: '',
  major: '',
  grade: '',
  phone: '',
  emergencyContacts: '',
  contactPhone: '',
  fillDate: null,
  contactScreening: '3'
})

/**
 * 保存按钮
 */
const saveButton = async (ruleFormRef: FormInstance | undefined) => {
  if (!ruleFormRef) {
    return;
  }
  await ruleFormRef.validate(async (valid) => {
    if (!valid) {
      ElNotification({
        title: 'Warning',
        type: 'warning',
        message: '请检查表单必填选项'
      })
      return
    }
    const result: ApiResponse<any> = await saveInfoReq(baseInfoForm.value)
    //添加或者更新成功
    if (result.code !== 1000_0000) {
      ElMessage({type: 'error', message: result.msg});
      return
    }
    ElMessage({type: 'success', message: '保存成功'});
    resetButton();
  })
}

/**
 * 重置按钮
 */
const resetButton = () => {
  baseInfoForm.value = {
    name: '',
    sex: '1',
    studentNumber: '',
    age: 0,
    college: '',
    major: '',
    grade: '',
    phone: '',
    emergencyContacts: '',
    contactPhone: '',
    fillDate: null,
    contactScreening: '3'
  }
}

/**
 * 校验规则定义
 */
const baseInfoRules = ref<FormRules>({
  name: [
    {
      required: true,
      message: '请输入用户姓名',
      trigger: 'blur'
    }
  ],
  sex: [
    {
      required: true,
      message: '请选择用户性别',
      trigger: 'change',
    },
  ],
  studentNumber: [
    {
      required: true,
      message: '请输入用户学号',
      trigger: 'blur'
    }
  ],
  age: [
    {
      required: true,
      message: '请输入用户年龄',
      trigger: 'blur'
    }
  ],
  phone: [
    {
      required: true,
      message: '请输入用户电话',
      trigger: 'blur'
    }
  ],
  fillDate: [
    {
      required: true,
      message: '请选择填报日期',
      trigger: 'change'
    }
  ],
  emergencyContacts: [
    {
      required: true,
      message: '请输入紧急联系人',
      trigger: 'blur'
    }
  ],
  contactPhone: [
    {
      required: true,
      message: '请输入紧急联系人电话',
      trigger: 'blur'
    }
  ]
});

</script>

<style lang="scss">
.top {
  margin-bottom: 2vh;

  .top-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
  }

  .search-form {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-form-item {
      margin-bottom: 0;

      .el-input {
        width: 220px;
      }
    }
  }
}


.book-info-card {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 20px;

  .image {
    display: block;
    height: 40vh;
  }

  .card-item {
    .card-body {
      padding: 0;

      .el-row {
        height: 32px;
      }
    }
  }

  .bottom {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-content: center;
    align-items: center;
    justify-items: center;

    .bottom-left {
      grid-row: 1;
      grid-column: 1;
    }

    .bottom-right-right {
      grid-row: 1;
      grid-column: 6/6;
    }
  }

}

.page-bottom {
  margin-top: 2vh;
}

.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.dialog-container {
  display: flex;

  .dialog-container-left {
    margin: 0 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dialog-container-right {
    display: flex;
    justify-content: center;
    align-items: center;
  }

}


.bottom {

  .bottom-table {
    margin: 2vh 0;

    .unfold-card {
      background-color: rgba(135 206 250 / .5);

      .unfold {
        width: 40%;
        display: flex;
        justify-content: space-between;

        p:first-child {
          margin-top: 0;
        }
      }
    }
  }
}
</style>
